<template>
  <section class="login">
      <section class="login-photograph">
        <img src="./login1.png" alt="">
      </section>
      <section class="login-entry">
            <section class="login-entry-users">
              <i class="fa fa-mobile"></i>
              <input type="text" class="users" 
              v-model="nameMessage"
              autocomplete="on"
              required="required" 
              autofocus="autofocus" 
              placeholder="请输入手机号/账号">
            </section>
            <section class="error-name">{{accountNumber}}</section>
            <section class="login-entry-password">
              <i class="fa fa-lock"></i>
              <input type="password" class="password" 
              v-model="passwordMessage"
              required="required" 
              autocomplete="off" 
              placeholder="请输入密码">
            </section>
            <section class="error-password">{{accountPassword}}</section>
            <section class="login-entry-refer">
            <input type="submit" class="refer" value="登 录" v-on:click="logOn()" disabled="disabled">
            </section>
          <section class="login-entry-register">
            <section class="mobile">手机快速注册</section>
            <section class="find-password">找回密码</section>
          </section>
          <section class="login-entry-other">
            <span></span>
            <span>第三方账号登录</span>
            <span></span>
          </section>
          <section class="login-entry-app">
            <section><img src="./weibo.png" alt=""></section>
            <section><img src="./weixin.png" alt=""></section>
            <section><img src="./qq.png" alt=""></section>
          </section>
      </section>
  </section>
</template>
<script>
export default {
  name:'login',

  data(){
    return {
      nameMessage:'',
      accountNumber:'',
      passwordMessage:'',
      accountPassword:'',
      message:{}
    }
  },
  created(){
    this.getMessage()
  },
  watch:{
    nameMessage:function(newVal){
      var len=newVal.length,
          reg=/^(1[358]\d{9})$/;
      if(len<6){
        this.accountNumber="用户名不能小于6位";
        return 
      }else if(len>12){
        this.accountNumber="用户名不能大于12位";
        return
      }else{
        this.accountNumber="";
      };
      if(!isNaN(newVal)){
        console.log(!isNaN(newVal));
        if(!(reg.test(newVal))){
          // console.log(reg.test(newVal));
          this.accountNumber="请输入以13、15、18开头的手机号码";
          return
        }else{
          this.accountNumber="";
        }
      }else{
        this.accountNumber="";
      }
    },
    passwordMessage:function(val){
      const len=val.length,
            reg=/[~@#$%^&*,:;]/;
      if(len<10){
        this.accountPassword="密码不能小于10位";
        return
      }else if(len>18){
        this.accountPassword="密码不能大于18位";
        return        
      }else{
        this.accountPassword="";
      };
      // console.log(1111)
      if(!isNaN(val)){
        this.accountPassword="密码不能为纯数字";
        return
      }else{
        this.accountPassword="";
      };
      if(reg.test(val)){
        console.log(5555)
        this.accountPassword="密码中不能含有此字符";
        return
      }else{
        this.accountPassword="";
      };
      document.querySelector('.refer').removeAttribute('disabled');
    }
  },
  methods:{
    getMessage(){
      this.$http.post(
        "https://easy-mock.com/mock/5a15632324f7a9469678aafa/examine/user"
      ).then(function({body}){
        if(body.code==200){
          this.message=body.data;
        }
      })
    },
    logOn(){
      console.log(this.message,11111);
      if(this.nameMessage==this.message.name||this.nameMessage==this.message.mobilePhone){
        if(this.passwordMessage==this.message.password){
          console.log('登陆成功');
          this.$router.push('home');
        }else{
          this.accountPassword="密码错误"
        }
      }else{
        this.accountNumber="用户名错误"
      }
    }
  }
};
</script>
<style lang="scss">
@import "../../assets/scss/_index.scss";
.login{
  &-photograph{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: px2rem(430);
    background:gray;
    img{

    }
  }
  &-entry{
    position: relative;
    width: 100%;
    margin-top: px2rem(20);
    padding-left: px2rem(73);
    padding-right: px2rem(67);
    &-users{
      display: flex;
      width: 100%;
      height: px2rem(86);
      border-bottom: 1px solid #929292;
      // background: red;
      i{
        display: inline-block;
        width: 6%;
        font-size: px2rem(50);
        color: #929292;
        margin-top: px2rem(24);
      }
      .users{
        width: 94%;
        height: px2rem(84);
        // background: blue;
        padding-left: px2rem(40);
        font-size: px2rem(36);
        color: #929292;
        border: none;
        outline: none;
        letter-spacing: 3px;
      }
    }
    .error-name{
      position: absolute;
      top: px2rem(90);
      left: px2rem(150);
      color: red;
    }
    .error-password{
      position: absolute;
      top: px2rem(196);
      left: px2rem(150);
      color: red;
    }
    &-password{
      display: flex;
      width: 100%;
      height: px2rem(86);
      border-bottom: 1px solid #929292;
      margin-top: px2rem(20);
      i{
        display: inline-block;
        width: 6%;
        font-size: px2rem(40);
        color: #929292;
        margin-top: px2rem(28);        
      }
      .password{
        width: 94%;
        height: px2rem(84);
        padding-left: px2rem(40);
        font-size: px2rem(36);
        color: #929292;
        border: none;
        outline: none;
        letter-spacing: 3px;        
      }
    }
    &-refer{
      width: 100%;
      height: px2rem(84);
      margin-top: px2rem(40);
      .refer{
        width: 100%;
        height: 100%;
        background: $basic-color;
        border: none;
        outline: none;
        font-size: px2rem(35);
        font-weight: bold;
        color: #fff;
        border-radius: px2rem(10);
      }
    }
    &-register{
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin-top: px2rem(34);
      .mobile{
        font-size: px2rem(26);
        color: #929292;
        
      }
      .find-password{
        font-size: px2rem(26);
        color: #929292;
        
      }
    }
    &-other{
      display: flex;
      width: 100%;
      margin-top: px2rem(130);
      span{
        display: inline-block;
        width: 33.33%;
        &:nth-of-type(1),
         &:nth-of-type(3){
           border-top: 1px solid #e1e1e1;
           margin-top: px2rem(14);
        }
        &:nth-of-type(2){
          text-align: center;
          font-size: px2rem(30);
          color: #e1e1e1;
        }
      }
    }
    &-app{
      display: flex;
      justify-content: space-around;
      margin-top: px2rem(48);
      section{
        width: px2rem(56);
        height: px2rem(56);
        img{
          width: 100%;
        }
      }
    }
  }
}
</style>